import { Checkbox, Input, Select } from 'antd';

import { useDictStore } from '@/store/dict';

import { INPUT_MAX_DATA_NAME, INPUT_MIN_DATA_NAME,respVariables,ValueTypeDict } from './data';

interface ApiModelDataStructureProps {
    onDataChange: (newList: any) => void;
}

export interface ApiModelDataStructureRef {
    initData: (data?: any) => void;
    getData: () => void;
}

export const ApiModelDataStructure = memo(
    forwardRef<ApiModelDataStructureRef, ApiModelDataStructureProps>((props, ref) => {
        const { fieldTypeOptions } = useDictStore();

        const [listDatas, setListDatas] = useState<any[]>([]);

        const initDataSource = (data: any) => {
            if (data) {
                const keys = Object.keys(data);
                const newListDatas = keys.map((item) => {
                    let jsType: any = typeof data[item];
                    switch (jsType) {
                        case 'number':
                            if (jsType === 'number') {
                                jsType = Number.isInteger(data[item]) ? 'int' : 'float';
                            }
                            break;
                        default:
                            jsType = 'string';
                            break;
                    }

                    const varType = ValueTypeDict[jsType as keyof typeof ValueTypeDict];
                    return {
                        varName: item,
                        varLabel: item,
                        varType: varType,
                        // initValue: null, // data[item],
                        checked: true
                    };
                });
                setListDatas(newListDatas);
            }
        };

        const handleChange = (varName: string, key: keyof respVariables, value: any) => {
            const newList = listDatas.map(item =>
                item.varName === varName ? { ...item, [key]: value } : item
            );
            setListDatas(newList);
            if(key !== 'varType') {
                props.onDataChange(newList);
            }
        };

        useImperativeHandle(ref, () => ({
            initData: (data: any) => {
                initDataSource(data);
            },
            getData: () => {
                return listDatas || [];
            },
        }));

        return (
            <>
                <p>数据结构</p>
                <div className="max-h-500 min-h-200 mt-8" style={{ width: '100%', overflow: 'auto' }}>
                    {/* 标题行 */}
                    <div className="grid gap-x-2 gap-y-4 grid-cols-3" style={{ background: '#f7f8fa' }}>
                        <div className="px-10 py-8" style={{ width: '100%', display: 'flex' }}>
                            <p style={{ flex: 1, margin: 0 }}>解析字段</p>
                        </div>
                        <div className="px-10 py-8">
                            <p style={{ flex: 1, margin: 0 }}>字段重命名</p>
                        </div>
                        <div className="px-10 py-8">
                            <p style={{ flex: 1, margin: 0 }}>字段类型</p>
                        </div>
                    </div>
                    {/* 字段行 */}
                    {
                        listDatas.map((item: any) => {
                            return (
                                <div className="grid gap-x-2 gap-y-4 grid-cols-3" key={item.varLabel}>
                                    <div className="px-10 py-6">
                                        <Checkbox checked={item.checked} onChange={(e) => handleChange(item.varName, 'checked', e.target.checked)}>
                                            {item.varName}
                                        </Checkbox>
                                    </div>
                                    <div className="px-10 py-6">
                                        <Input
                                            value={item.varLabel}
                                            min={INPUT_MIN_DATA_NAME}
                                            max={INPUT_MAX_DATA_NAME}
                                            onChange={(e) => handleChange(item.varName, 'varLabel', e.target.value)}
                                        />
                                    </div>
                                    <div className="px-10 py-6">
                                        <Select style={{ width: '80%' }} value={item.varType} options={fieldTypeOptions} onChange={(val) => handleChange(item.varName, 'varType', val)} />
                                    </div>
                                </div>
                            );
                        })
                    }
                </div>
            </>
        );
    })
);
